<template>
    <div class="">
        <ELTable v-bind="configTable">
            <template #search="{ searchSubmit, params }">
                <div>
                    <el-form :inline="true" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="params.key" placeholder="请输入关键字" />
                        </el-form-item>
                        <el-form-item label="职员类型">
                            <el-select clearable v-model="params.type" style="width:120px" placeholder="请选择类型">
                                <el-option v-for="item in staffsType" :label="item.name" :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="">
                            <el-button type="primary" @click="searchSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </template>

            <template #buttons="{ deleteAllHandle }">
                <div>
                    <el-button type="primary" @click="add">添加</el-button>
                    <el-button type="danger" @click="deleteAllHandle">删除</el-button>
                </div>
            </template>
            <template #building="{ scope }">
                <div v-for="item in scope.row.building">
                    {{ item.building }}
                </div>
            </template>

            <template #operate="{ scope, delrow }">
                <div>
                    <el-button type="primary" @click="change(scope.row)">修改</el-button>
                    <el-button type="danger" @click="delrow(scope.row.id)">删除</el-button>
                </div>
            </template>
        </ELTable>
        <staffsAdd v-if="showadd" :addForm="addForm" @close="close" ></staffsAdd>
    </div>
</template>

<script lang='ts' setup>
import { ref, watch, reactive, onMounted } from "vue"
import { getstaff, staffadd, delstaff, delallstaff, getstafftype } from "../../service/staffs/staffs"
import staffsAdd from "../../components/staffsAdd.vue";
import ELTable, { TableType } from "../../components/ELTable.vue";
import { stafftype } from "../../service/staffs/type"
import { column } from './staffs'


const showadd = ref(false) 
const configTable: TableType = reactive({
    column: column,
    isSelection: true,
    loadData: getstaff,
    delallDate: delallstaff,
    delDate: delstaff,
})

const add = () => {
    addForm.id = 0
    showadd.value = true
}
const close = () => {
    showadd.value = false
}
type staffstype = {
    id: number,
    name: string
}

const addForm:stafftype ={
    id: 0,
    name: "",
    photo: "",
    type: null ,
    sex: 0 ,
    mobile: "",
    cardid: "",
    pass: "",
    state: 0,
    building: []
}
const change = (val:any)=>{
    addForm.id = val.id
    addForm.name= val.name
    addForm.photo= val.photo
    addForm.type= val.type
    addForm.sex= val.sex
    addForm.mobile= val.mobile
    addForm.cardid= val.cardid
    addForm.building= val.building

    console.log(addForm);
    showadd.value = true
}

const staffsType = ref<staffstype[]>([])
const getstaffsType = async () => {
    const res = await getstafftype()    
    staffsType.value = res.data.list
}

onMounted(() => {
    getstaffsType()
})
</script>

<style scoped></style>